<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    
<base href="<%=basePath%>">

<title>登录页面</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resources/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/common/css/htmleaf-demo.css">
<script src="resources/common/jquery/jquery-3.2.1.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/toastr/js/toastr.js"></script>
<link rel="stylesheet" href="resources/toastr/css/toastr.css">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="登录页面">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
		.form-bg{
		    background: #00b4ef;
		}
		.form-horizontal{
		    background: #fff;
		    padding-bottom: 40px;
		    border-radius: 15px;
		    text-align: center;
		}
		.form-horizontal .heading{
		    display: block;
		    font-size: 35px;
		    font-weight: 700;
		    padding: 35px 0;
		    border-bottom: 1px solid #f0f0f0;
		    margin-bottom: 30px;
		}
		.form-horizontal .form-group{
		    padding: 0 40px;
		    margin: 0 0 25px 0;
		    position: relative;
		}
		.form-horizontal .form-control{
		    background: #f0f0f0;
		    border: none;
		    border-radius: 20px;
		    box-shadow: none;
		    padding: 0 20px 0 45px;
		    height: 40px;
		    transition: all 0.3s ease 0s;
		}
		.form-horizontal .form-control:focus{
		    background: #e0e0e0;
		    box-shadow: none;
		    outline: 0 none;
		}
		.form-horizontal .form-group i{
		    position: absolute;
		    top: 12px;
		    left: 60px;
		    font-size: 17px;
		    color: #c8c8c8;
		    transition : all 0.5s ease 0s;
		}
		.form-horizontal .form-control:focus + i{
		    color: #00b4ef;
		}
		.form-horizontal .fa-question-circle{
		    display: inline-block;
		    position: absolute;
		    top: 12px;
		    right: 60px;
		    font-size: 20px;
		    color: #808080;
		    transition: all 0.5s ease 0s;
		}
		.form-horizontal .fa-question-circle:hover{
		    color: #000;
		}
		.form-horizontal .main-checkbox{
		    float: left;
		    width: 20px;
		    height: 20px;
		    background: #11a3fc;
		    border-radius: 50%;
		    position: relative;
		    margin: 5px 0 0 5px;
		    border: 1px solid #11a3fc;
		}
		.form-horizontal .main-checkbox label{
		    width: 20px;
		    height: 20px;
		    position: absolute;
		    top: 0;
		    left: 0;
		    cursor: pointer;
		}
		.form-horizontal .main-checkbox label:after{
		    content: "";
		    width: 10px;
		    height: 5px;
		    position: absolute;
		    top: 5px;
		    left: 4px;
		    border: 3px solid #fff;
		    border-top: none;
		    border-right: none;
		    background: transparent;
		    opacity: 0;
		    -webkit-transform: rotate(-45deg);
		    transform: rotate(-45deg);
		}
		.form-horizontal .main-checkbox input[type=checkbox]{
		    visibility: hidden;
		}
		.form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
		    opacity: 1;
		}
		.form-horizontal .text{
		    float: left;
		    margin-left: 7px;
		    line-height: 20px;
		    padding-top: 5px;
		    text-transform: capitalize;
		}
		.form-horizontal .btn{
		    float: right;
		    font-size: 14px;
		    color: #fff;
		    background: #00b4ef;
		    border-radius: 30px;
		    padding: 10px 25px;
		    border: none;
		    text-transform: capitalize;
		    transition: all 0.5s ease 0s;
		}
		@media only screen and (max-width: 479px){
		    .form-horizontal .form-group{
		        padding: 0 25px;
		    }
		    .form-horizontal .form-group i{
		        left: 45px;
		    }
		    .form-horizontal .btn{
		        padding: 10px 20px;
		    }
		}
	</style>
</head>
<script type="text/javascript">
	$(document).ready(function(){  
		toastr.options.positionClass = 'toast-center-center';//初始化提示框插件
        $("#Mymodal").click(function(){  
            $("#new").modal("show")  
        });
        
        $("#resu").click(function(){  
            $("#register_uname").val("");
            $("#register_pwd").val("");
            $("#register_name").val("");
        });
        $("#cpwd").click(function(){  //找回密码
            $("#callpwd").modal("show")
        });
        $("#callpwdy").click(function(){  //新密码
        	var uname = $("#call_uname").val();
        	var email = $("#c_email").val();
        	if(uname == ""){
        		toastr.warning("用户名不能为空");
        		return false;
        	}
        	if(email == "" || email == ""){
        		toastr.warning("邮箱不能为空");
        		return false;
        	}
        	$.ajax({
        		url:'callpwd.do',
        		type:'post',
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		data:JSON.stringify({"uname":uname,"email":email}),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		success:function(data){//成功
        			if(data.succ == 'true'){
        				$("#callpwd").modal("hide")
        				$("#newpwd").modal("show")
        				$("#newuname").val(uname)
        				$("#new_pwd").val("")
        			}else{
        				toastr.warning("用户名与邮箱不匹配");
        			}
		        	}
        	});
        	return false;
        });
        $("#changepwd").click(function(){  //更新新密码
        	var uname = $("#newuname").val();
        	var pwd = $("#new_pwd").val();
        	if(pwd == ""){
        		toastr.warning("密码不能为空");
        		return false;
        	}
        	var pwdpattern = /^[a-zA-Z]\w{5,17}$/;
        	if(!pwdpattern.test(pwd)){
            	toastr.warning("密码不合法");
            	return false;
            }
        	$.ajax({
        		url:'changepwd.do',
        		type:'post',
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		data:JSON.stringify({"uname":uname,"pwd":pwd}),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		success:function(data){//成功
        			if(data.succ == 'true'){
        				$("#newpwd").modal("hide");
	     				toastr.warning("密码已更新");
	     			}else{
	     				toastr.warning("密码更新失败");
	     			}
		        	}
        	});
        	return false;
        });
        $("#login").click(function(){  
            var pattern = /^\w+$/;
            var uname = $("#uname").val();
            if(uname == ""){
            	toastr.warning("用户名不能为空");
            	return false;
            }
 			return true;
        });
        $("#register_uname").blur(function(){ //注册用户 检查用户名唯一性 
        	var uname = $("#register_uname").val();
        	if(uname == ""){
        		return false;
        	}
            $.ajax({
        		url:'testuname.do',
        		type:'post',
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		data:JSON.stringify({"uname":uname}),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		success:function(data){//成功
        			if(data.succ == 'true'){
	     				toastr.warning("用户名已存在");
	     			}
		        	}
        	});
        });
        $("#register").click(function(){  
            var pattern = /^\w+$/;
            var pwdpattern = /^[a-zA-Z]\w{5,17}$/;
            var register_uname = $("#register_uname").val();//用户名
            var register_pwd = $("#register_pwd").val();//密码
            alert(register_uname);
            if(!pattern.test(register_uname)){
            	toastr.warning("用户名不合法");
            	return false;
            }
            if(!pwdpattern.test(register_pwd)){
            	toastr.warning("密码不合法");
            	return false;
            }
 			return true;
        });
        $("[data-toggle='tooltip']").tooltip();//提示信息
        var msg = "<%=session.getAttribute("msg") %>";
        if(msg != "null"){
        	toastr.warning(msg);
        }
    })
</script>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>XXXXXX监测平台</h1>
		</header>
		<div class="demo form-bg" style="padding: 180px 0;">
		        <div class="container">
		            <div class="row">
		                <div class="col-md-offset-3 col-md-6">
		                    <form class="form-horizontal" action="login.do" method="post">
		                        <span class="heading">用户登录</span>
		                        <div class="form-group">
		                            <input type="text" name="uname" class="form-control"  placeholder="用户名" id="uname">
		                            <i class="fa fa-user"></i>
		                        </div>
		                        <div class="form-group help">
		                            <input type="password" name="password" class="form-control"  placeholder="密　码">
		                            <i class="fa fa-lock"></i>
		                            <a href="javascript:void(0);" class="fa fa-question-circle" title="忘记密码" id="cpwd"></a>
		                        </div>
		                        <div class="form-group">、
		                        	<button type="submit" class="btn btn-default" id="login">登录</button>
		                            <button type="button" data-toggle="modal" id="Mymodal"
		                            class="btn btn-default">注册</button>
		                            
		                        </div>
		                    </form>
		                </div>
		            </div>
		        </div>
		    </div>
		<div class="related">
		    <h3>XXXXXX公司</h3>
		</div>
	</div>

  <!-- 注册界面 -->  
 <div class="modal fade" id="new">  
            <div class="modal-dialog">    
              <div class="modal-content">    
                <div class="modal-header"> 用户快速注册 </div>    
                <form class="form-horizontal" action="registeruser.do" method="post">    
                  <div class="modal-body">    
                    <div class="form-group">    
                      <label for="register_uname" class="col-sm-2 control-label">用户名</label>    
                      <div class="col-sm-10">    
                        <input id="register_uname" name="register_uname" type="text" class="form-control list-inline" placeholder="用户名"
                        data-toggle="tooltip" data-placement="top" title="支持数字、26个英文字母或者下划线"/>    
                      </div>    
                    </div>    
                    <div class="form-group">    
                      <label for="register_pwd" class="col-sm-2 control-label">密码</label>    
                      <div class="col-sm-10">    
                        <input id="register_pwd" type="password" name="register_pwd" class="form-control list-inline" placeholder="密码"
                        data-toggle="tooltip" data-placement="top" title="以字母开头，长度在6-18之间，只能包含字符、数字和下划线"/>    
                      </div>    
                    </div>    
                    <div class="form-group">    
                      <label for="register_name" class="col-sm-2 control-label">姓名</label>    
                      <div class="col-sm-10">    
                        <input id="register_name" type="text" name="register_name" class="form-control list-inline" placeholder="姓名"/>    
                      </div>    
                    </div>    
                  </div>    
                 
                <div class="modal-footer">    
                  <button class="btn btn-success" type="submit" id="register">注册</button>    
                  <button class="btn btn-warning" id="resu" type="reset" >重置</button>    
                  <button class="btn btn-danger" data-dismiss="modal">取消</button>    
                </div>  
                </form>  
              </div>    
            </div>    
          </div>  
          
 <!-- 找回密码 -->  
 <div class="modal fade" id="callpwd">  
            <div class="modal-dialog">    
              <div class="modal-content">    
                <div class="modal-header"> 找回密码 </div>    
                <form class="form-horizontal" action="callpwd.do" method="post">    
                  <div class="modal-body">    
                    <div class="form-group">    
                      <label for="call_uname" class="col-sm-2 control-label">用户名</label>    
                      <div class="col-sm-10">    
                        <input id="call_uname" type="text" name="call_uname" class="form-control list-inline" placeholder="用户名"/>    
                      </div>    
                    </div>    
                    <div class="form-group">    
                      <label for="c_email" class="col-sm-2 control-label">邮箱</label>    
                      <div class="col-sm-10">    
                        <input id="c_email" type="text" name="c_email" class="form-control list-inline" placeholder="邮箱"/>    
                      </div>    
                    </div>    
                  </div>    
                 
                <div class="modal-footer">    
                  <button class="btn btn-success" type="submit" id="callpwdy">确认</button>    
                  <button class="btn btn-danger" data-dismiss="modal">取消</button>    
                </div>  
                </form>  
              </div>    
            </div>    
          </div>  
<!-- 更新密码 -->  
 <div class="modal fade" id="newpwd">  
            <div class="modal-dialog">    
              <div class="modal-content">    
                <div class="modal-header"> 更新密码 </div>    
                <form class="form-horizontal" action="changepwd.do" method="post">    
                  <div class="modal-body">  
                  	<div class="form-group">    
                      <label for="newuname" class="col-sm-2 control-label">用户名</label>    
                      <div class="col-sm-10">    
                        <input id="newuname" type="text" name="newuname" class="form-control list-inline" placeholder="用户名" disabled/> 
                      </div>    
                    </div>   
                    <div class="form-group">    
                      <label for="new_pwd" class="col-sm-2 control-label">新密码</label>    
                      <div class="col-sm-10">    
                        <input id="new_pwd" type="password" name="new_pwd" class="form-control list-inline" placeholder="新密码"
                        data-toggle="tooltip" data-placement="top" title="以字母开头，长度在6-18之间，只能包含字符、数字和下划线"/> 
                      </div>    
                    </div>    
                      
                  </div>    
                 
                <div class="modal-footer">    
                  <button class="btn btn-success" type="submit" id="changepwd">确认</button>    
                  <button class="btn btn-danger" data-dismiss="modal">取消</button>    
                </div>  
                </form>  
              </div>    
            </div>    
          </div>  
</body>
</html>
